'use client'
import Image from "next/image"
import { FC } from "react"
import { consultant } from "../../datas"

const Consultant: FC<{ active: number }> = ({ active }) => {
  return (
    <div className="flex-1 flex items-center rounded-tr-[5px] lg:rounded-tr-[20px] rounded-b-[5px] lg:rounded-b-[20px] lg:rounded-bl-none bg-white pt-[10px] md:pt-0 overflow-x-auto">
      <ul className="flex flex-1 items-center gap-[24px] px-[10px] pb-[10px] md:pb-0 md:px-[32px] pr-[10px] md:pr-[50px]">
        {consultant[active].list.map((item, index) => (
          <li className="cursor-pointer group" key={index}>
            <div className="relative size-[80px] md:size-[103px] md:group-hover:scale-110 mx-auto rounded-full transition-transform overflow-hidden shadow-[0_0_10px_#f5e3b4]" style={{ transformOrigin: 'bottom' }}>
              <Image alt="" fill src={item.avatar} />
            </div>
            <p className="text-center text-[#333] text-sm md:text-[18px] leading-[16px] mt-[14px] mb-[5px] md:mb-[10px]">{item.name}</p>
            <p className="p-[4px] text-center w-[140px] text-[#184579] text-xs border border-[#1456A2] mx-auto rounded-full">
              <span className='line-clamp-1'>{item.text}</span>
            </p>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default Consultant